<template>
  <border
    class="basic-information"
    :moduleType="borderConfig.moduleType"
    :icon="borderConfig.icon"
    :titleText="borderConfig.titleText"
    :goPageUrl="borderConfig.goPageUrl">
    <div class="module-content" slot="module-content">
      <div class="module-content-left">
        <div class="octagon-list">
          <octagon
            v-for="(item, index) in octagonMessage.octagonIcon"
            :key="index"
            :iconClass="item"
            :octagonName="octagonMessage.octagonName[index]"
            :octagonNumber="octagonMessage.octagonNumber[index]"
            :octagonUnit="octagonMessage.octagonUnit[index]">
          </octagon>
        </div>
        <map-vue :organId="organId"
                 ref="mapVue"
                 :isUse2D = "mapConfig.isUse2D"
                 :isMapMenu = "mapConfig.isMapMenu"
                 :isCallback = "mapConfig.isCallback"
                 :isNeedMapBackground="mapConfig.isNeedMapBackground"
                 @showTips="showTips"
                 @changeMap="changeMap"></map-vue>
      </div>
      <div class="module-content-right">
        <div class="pie-top">
          <div class="pie-title">
            <img class="pie-title-img" src="../../assets/images/module/pie-title.png"/>
            <p class="pie-title-message">项目业态</p>
          </div>
          <Pie
            ref="pieTop"
            class="pie-main pie-top-main"
            :pieData="pieTop.data"
            :typeName="pieTop.typeName"
            :dataName="pieTop.dataName"
            :labelSize="pieTop.labelSize"
            :labelLine="pieTop.labelLine"
            :pieType="pieType"
            :seriesRadius="seriesRadius"></Pie>
          <div class="pie-legend">
            <div class="legend-li" v-for="(item, index) in pieTopInformation" :key="index">
              <span class="legend-span" v-if="item.typeTotal != 0">
                <i></i>{{ item.typeName }}
              </span>
            </div>
          </div>
        </div>
        <div class="pie-bottom">
          <div class="pie-title">
            <img class="pie-title-img" src="../../assets/images/module/pie-title.png"/>
            <p class="pie-title-message">房屋状态</p>
          </div>
          <Pie
            ref="pieBottom"
            class="pie-main pie-bottom-main"
            :pieData="pieBottom.data"
            :typeName="pieBottom.typeName"
            :dataName="pieBottom.dataName"
            :labelSize="pieBottom.labelSize"
            :labelLine="pieBottom.labelLine"
            :pieType="pieType"
            :seriesRadius="seriesRadius"></Pie>
          <div class="pie-legend">
            <div class="legend-li" v-for="(item, index) in pieBottomInformation" :key="index">
              <span class="legend-span" v-if="item.typeTotal != 0">
                <i></i>{{ item.typeName }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </border>
</template>

<script>
import Border from './../components/Border.vue'
import Octagon from './../components/Octagon.vue'
import MapVue from './../components/MapVue.vue'
import Pie from './../components/Pie.vue'
export default {
  name: 'basicInformation',
  components: {
    Border,
    Octagon,
    MapVue,
    Pie
  },
  data () {
    return {
      borderConfig: {
        moduleType: '2x2',
        icon: require('./../../assets/images/icon/big-icon.png'),
        titleText: '基础信息',
        goPageUrl: ''
      },
      pieTop: {
        data: [],
        typeName: 'typeName',
        dataName: 'typeTotal',
        labelSize: 12,
        labelLine: {
          normal: {
            length: 10,
            length2: 10
          }
        },
        seriesRadius: [['10%', '40%'], ['5%', '10%'], ['45%', '46%'], ['52%', '53%'], ['59%', '60%']]
      },
      pieBottom: {
        data: [],
        typeName: 'typeName',
        dataName: 'typeTotal',
        labelSize: 12,
        labelLine: {
          normal: {
            length: 10,
            length2: 10
          }
        },
        seriesRadius: [['10%', '40%'], ['5%', '10%'], ['45%', '46%'], ['52%', '53%'], ['59%', '60%']]
      },
      pieTopInformation: [], //  房屋状态
      pieBottomInformation: [], // 项目业态
      mapConfig: {
        isMapMenu: true,
        isUse2D: false,
        isCallback: true,
        isNeedMapBackground: false
      },
      octagonMessage: {
        octagonIcon: ['icon-xiangmu', 'icon-mianji', 'icon-fuwushi', 'icon-yuangong', 'icon-shouji', 'icon-fangwu', 'icon-huoyuedu', 'icon-huoyuehuiyuan'],
        octagonName: ['服务项目', '管理面积', '服务户数', '员工总数', 'APP用户', '房屋认证数', '周活跃', '月活跃'],
        octagonNumber: ['', '', '', '', '', '', '', ''],
        octagonUnit: ['个', '万㎡', '个', '个', '个', '个', '', '']
      },
      provinceId: '',
      cityId: '',
      areaId: ''
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    },
    pieType () {
      return this.$store.state.themeConfig.echartsTheme === 'default' ? '' : 'default'
    },
    seriesRadius () {
      return this.$store.state.themeConfig.echartsTheme === 'default' ? [['10%', '40%'], ['5%', '10%'], ['45%', '46%'], ['52%', '53%'], ['59%', '60%']] : [['35%', '50%']]
    }
  },
  methods: {
    showTips  (data) {
      this.$parent.showTips(data)
    },
    // 获取公司信息
    changesCompany (type) {
      let obj = {
        organId: this.organId,
        provinceId: this.provinceId,
        cityId: this.cityId,
        areaId: this.areaId
      }
      // 获取基础信息
      this.basicInforMationApi.getInformation(obj).then((res) => {
        if (res.data.code === '0') {
          let data = res.data.data
          this.octagonMessage.octagonNumber = [data.communitys, data.manageAreas, data.houses,
            data.employees, data.appUsers, data.identifyHouses, data.weekActive, data.monthActive]
        } else {
          this.octagonMessage.octagonNumber = [0, 0, 0, 0, 0, 0, 0, 0]
          this.$parent.showTips('请求失败，点击确认继续刷新')
        }
      }, (res) => {
        this.octagonMessage.octagonNumber = [0, 0, 0, 0, 0, 0, 0, 0]
        this.showTips('请求失败，点击确认继续刷新')
      })
      // 获取项目业态
      this.basicInforMationApi.getOrganCommunityTypeList(obj).then((res) => {
        if (res.data.code === '0') {
          this.pieTopInformation = res.data.data
          this.pieTop.data = res.data.data
        } else {
          this.pieTopInformation = []
          this.pieTop.data = []
          this.$parent.showTips('请求失败，点击确认继续刷新')
        }
      }, (res) => {
        this.pieTopInformation = []
        this.pieTop.data = []
        this.showTips('请求失败，点击确认继续刷新')
      })
      // 获取房屋状态信息
      this.basicInforMationApi.getOrganHouseTypeListByMid(obj).then((res) => {
        if (res.data.code === '0') {
          this.pieBottom.data = res.data.data
          this.pieBottomInformation = res.data.data
        } else {
          this.pieBottomInformation = []
          this.pieBottom.data = []
          this.$parent.showTips('请求失败，点击确认继续刷新')
        }
      }, (res) => {
        this.pieBottomInformation = []
        this.pieBottom.data = []
        this.showTips('请求失败，点击确认继续刷新')
      })
    },
    // 地图回调
    changeMap (data) {
      this.provinceId = data.provinceId
      this.cityId = data.cityId
      this.areaId = data.areaId
      this.changesCompany()
    },
    getData (type) {
      if (type === 'init') {
        this.$refs.mapVue.getProvince()
        this.changesCompany()
      }
    },
    resizeChart () {
      this.$refs.pieTop.resizeChart()
      this.$refs.pieBottom.resizeChart()
      this.$refs.mapVue.resizeChart()
    }
  },
  mounted () {
  },
  watch: {
    organId (val) {
      this.changesCompany()
    }
  }
}
</script>
<style lang="scss" scoped>
.basic-information{
  /deep/ .module-main {
    height: 93%!important;
  }
  .module-content {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    padding: 10px 10px 0;
    .module-content-left {
      width: 70%;
      height: calc(100% - 10px);
      float: left;
      .octagon-list {
        width: 100%;
        height: 22.3%;
        padding-left:5%;
        box-sizing: border-box;
        overflow: hidden;
        .octagon {
          position: relative;
          overflow: hidden;
          width: 22%;
          float: left;
          margin: 0 1.2% 2% 0;
          background: url(../../assets/images/module/octagon.png) no-repeat center;
          background-size: 99% 100%;
        }
      }
      .map {
        width: 100%;
        height: calc(81% - 10px);
        margin-top: 10px;
      }
    }
    .module-content-right {
      width: 30%;
      height: 100%;
      float: left;
      .pie-top,.pie-bottom{
        width: 100%;
        height:50%;
      }
      .pie-title{
        width: 100%;
        padding: 0 2%;
        position: relative;
        display: flex;
        align-items: center;
        .pie-title-img{
          width: 34%;
        }
        .pie-title-message{
          width: 34%;
          font-size: 12px;
          color: #b5cff4;
          text-align: center;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          left: 1.5%;
          top: 0;
        }
      }
      .pie-main{
        width: 100%;
        height: 65%;
      }
      .pie-legend{
        width: 100%;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
        font-size: 12px;
        color: #fff;
        .legend-span{
          display: block;
          float: left;
          margin: 0 10px 5px 0;
          i{
            display: inline-block;
            width: 8px;
            height:8px;
            margin-right: 5px;
            border-radius: 100%;
          }
          &:nth-of-type(1){
            i{
              background: #e9e703;
            }
          }
          &:nth-of-type(2){
            i{
              background: #e8605e;
            }
          }
          &:nth-of-type(3){
            i{
              background: #19dc7c;
            }
          }
          &:nth-of-type(4){
            i{
              background: #319ced;
            }
          }
          &:nth-of-type(5){
            i{
              background: #fa9022;
            }
          }
          &:nth-of-type(6){
            i{
              background: #8c70f8;
            }
          }
          &:nth-of-type(7){
            i{
              background: #cadfea;
            }
          }
          &:nth-of-type(8){
            i{
              background: #f59233;
            }
          }
        }
      }
      .pie-legend{
        width: 100%;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
        font-size: 12px;
        color: #fff;
        .legend-li{
          &:nth-of-type(1){
            .legend-span{
               i{
                background: #e9e703;
              }
            }
          }
          &:nth-of-type(2){
            .legend-span{
               i{
                background: #e8605e;
              }
            }
          }
          &:nth-of-type(3){
            .legend-span{
               i{
                background: #19dc7c;
              }
            }
          }
          &:nth-of-type(4){
            .legend-span{
               i{
                background: #319ced;
              }
            }
          }
          &:nth-of-type(5){
            .legend-span{
               i{
                background: #fa9022;
              }
            }
          }
          &:nth-of-type(6){
            .legend-span{
               i{
                background: #8c70f8;
              }
            }
          }
        }
        .legend-span{
          display: block;
          float: left;
          margin: 0 10px 5px 0;
          i{
            display: inline-block;
            width: 8px;
            height:8px;
            margin-right: 5px;
            border-radius: 100%;
          }
        }
      }
    }
  }
}
</style>
